<template>
	<div class="index-data" >
		<!--滚动内容 start-->
		<el-scrollbar :native="true"  class="app-container-scroll-bar">
			
			<pageTitle :title="pageTitle" ></pageTitle>
			
			<el-row class="dashbord-data" style="margin: 20px 10px -20px;" :gutter="20">
				<el-col :xs="12" :sm="12" :lg="6">
					<el-card shadow="never">
							<div slot="header" class="clearfix">
						    <span style="cursor: pointer;" @click="goPage('/zy/jq')"><i class="iconfont icon-jiqun"></i>&nbsp;集群</span>
						    <el-button style="float: right; padding: 3px 0" type="text">
						    	
						    </el-button>
						  </div>
						  <div class="text item clearfix">
						  	<p class="fl" style="cursor: pointer;" @click="goPage('/zy/jq')">
						  		<i style="font-size: 40px;vertical-align: top;" class="iconfont icon-jiqun"></i>
						  	</p>
						  	<p class="fr">
						  		<span class="" >
							    	集群数:
							    	<span class="green" title="查看集群" style="cursor: pointer;" @click="goPage('/zy/jq')">{{dashbordData.clusterCount}}</span>
							    </span>
						  	</p>
						  </div>
					</el-card>
				</el-col>
				<el-col :xs="12" :sm="12" :lg="6">
					<el-card shadow="never">
							<div slot="header" class="clearfix">
						    <span style="cursor: pointer;" @click="goPage('/zy/zj')"><i class="iconfont icon-yunzhuji"></i>&nbsp;主机</span>
						    <el-button style="float: right; padding: 3px 0" type="text">
						    	
						    </el-button>
						  </div>
						  <div class="text item clearfix">
						  	<p class="fl" style="cursor: pointer;" @click="goPage('/zy/zj')">
						  		<i style="font-size: 40px;vertical-align: top;" class="iconfont icon-yunzhuji"></i>
						  	</p>
						  	<p class="fr">
						  		<table cellpadding="0" cellspacing="0" border="0">
						  			
						  			<tr>
						  				<td>运行:</td>
						  				<td>
						  					<span title="查看运行中的主机" style="cursor: pointer;" @click="goPage('/zy/zj',{status:'1'})" class="green">{{dashbordData.normalHost}}</span>
						  				</td>
						  			</tr>
						  			
						  			<tr>
						  				<td>待初始化:</td>
						  				<td>
						  					<span title="查看待初始化的主机" style="cursor: pointer;" @click="goPage('/zy/zj',{status:'0'})" class="blue">{{dashbordData.unInitHost}}</span>
						  				</td>
						  			</tr>
						  			
						  			<tr>
						  				<td>异常:</td>
						  				<td>
						  					<span title="查看异常主机" style="cursor: pointer;" @click="goPage('/zy/zj',{status:'3'})" class="red">{{dashbordData.abnormalHost}}</span>
						  				</td>
						  			</tr>
						  			
						  		</table>
						  		
						  	</p>
						  </div>
					</el-card>
				</el-col>
				<el-col :xs="12" :sm="12" :lg="6">
					<el-card shadow="never">
							<div slot="header" class="clearfix">
						    <span style="cursor: pointer;" @click="goPage('/yy/rq')"><i class="iconfont icon-cangku"></i>&nbsp;应用仓库</span>
						    <el-button style="float: right; padding: 3px 0" type="text">
						    	
						    </el-button>
						  </div>
						  <div class="text item clearfix">
						  	<p class="fl" style="cursor: pointer;" @click="goPage('/yy/rq')">
						  		<i style="font-size: 40px;vertical-align: top;" class="iconfont icon-cangku"></i>
						  	</p>
						  	<p class="fr">
						  		
						  		<table cellpadding="0" cellspacing="0" border="0">
						  			
						  			<tr>
						  				<td>容器模板:</td>
						  				<td>
						  					<span title="查看可用模板"
									    		style="cursor: pointer;" 
									    		@click="goPage('/yy/rq',{status:'1'})"
									    		class="green">{{dashbordData.normalContainerTemplate}}</span>
						  				</td>
						  				<td>/</td>
						  				<td>
						  					<span title="查看全部"
									    		style="cursor: pointer;" 
									    		@click="goPage('/yy/rq')">
									    		{{dashbordData.containerTemplate}}
									    	</span>
						  				</td>
						  			</tr>
						  			
						  			<tr>
						  				<td>裸应用模板:</td>
						  				<td>
						  					<span  title="查看可用模板"
						  						class="green" 
									    		style="cursor: pointer;" 
									    		@click="goPage('/yy/lyy',{status:'1'})"
									    		>{{dashbordData.normalAppTemplate}}</span>
						  				</td>
						  				<td>/</td>
						  				<td>
						  					<span  title="查看全部"
										    		style="cursor: pointer;" 
										    		@click="goPage('/yy/lyy')">
										    		{{dashbordData.appTemplate}}
										    	</span>
						  				</td>
						  			</tr>
						  			
						  			<tr>
						  				<td>组件模板:</td>
						  				<td>
						  					<span  title="查看可用模板"
						  						class="green" 
						  						style="cursor: pointer;" 
									    		@click="goPage('/yy/zj',{status:'1'})">
									    		{{dashbordData.normalAssemblyTemplate}}
									    	</span>
						  				</td>
						  				<td>/</td>
						  				<td>
						  					<span  title="查看全部"
										    		style="cursor: pointer;" 
										    		@click="goPage('/yy/zj')">
										    		{{dashbordData.assemblyTemplate}}
										    	</span>
						  				</td>
						  			</tr>
						  			
						  		</table>
						  		
						  	</p>
						  </div>
					</el-card>
				</el-col>
				<el-col :xs="12" :sm="12" :lg="6">
					<el-card shadow="never">
							<div slot="header" class="clearfix">
						    <span style="cursor: pointer;" @click="goPage('/sl/yy')"><i class="iconfont icon-chilunshezhi"></i>&nbsp;运行实例</span>
						    <el-button style="float: right; padding: 3px 0" type="text">
						    	
						    </el-button>
						  </div>
						  <div class="text item clearfix">
						  	<p class="fl">
						  		<i  @click="goPage('/sl/yy')" style="font-size: 36px;cursor: pointer;vertical-align: top;" class="iconfont icon-chilunshezhi"></i>
						  	</p>
						  	<p class="fr">
						  		
						  		<table cellpadding="0" cellspacing="0" border="0">
						  			
						  			<tr>
						  				<td>容器:</td>
						  				<td>
						  					<span title="查看运行中的实例"
									    		@click="goPage('/sl/yy',{status:'1',deployType:'1'})" 
									    		style="cursor: pointer;" 
									    		class="green">
									    		{{dashbordData.containerOverview.normal}}
									    	</span>
						  				</td>
						  				<td>/</td>
						  				<td>
						  					<span title="查看已停止的实例"
									    		@click="goPage('/sl/yy',{status:'2',deployType:'1'})" 
										    		style="cursor: pointer;" 
										    		class="grey">
										    		{{dashbordData.containerOverview.stop}}
										    	</span>
						  				</td>
						  				<td>/</td>
						  				<td>
						  					<span title="查看异常实例"
									    		@click="goPage('/sl/yy',{status:'4',deployType:'1'})" 
										    		style="cursor: pointer;" 
										    		class="red">
										    		{{dashbordData.containerOverview.abnormal}}
										    	</span>
						  				</td>
						  				<td>/</td>
						  				<td>
						  					<span title="查看所有实例"
									    		@click="goPage('/sl/yy',{deployType:'1'})" 
									    		style="cursor: pointer;" 
									    		>
									    		{{dashbordData.containerOverview.total}}
									    	</span>
						  				</td>
						  			</tr>
						  			
						  			<tr>
						  				<td>裸应用:</td>
						  				<td>
						  					<span title="查看运行中的实例"
									    		@click="goPage('/sl/yy',{status:'1',deployType:'2'})" 
										    		style="cursor: pointer;" 
										    		class="green">
										    		{{dashbordData.appOverveiw.normal}}
										    	</span>
						  				</td>
						  				<td>/</td>
						  				<td>
						  					<span title="查看已停止的实例"
									    		@click="goPage('/sl/yy',{status:'2',deployType:'2'})" 
										    		style="cursor: pointer;" 
										    		class="grey">
										    		{{dashbordData.appOverveiw.stop}}
										    	</span>
						  				</td>
						  				<td>/</td>
						  				<td>
						  					<span title="查看异常实例"
									    		@click="goPage('/sl/yy',{status:'4',deployType:'2'})" 
										    		style="cursor: pointer;" 
										    		class="red">
										    		{{dashbordData.appOverveiw.abnormal}}
										    	</span>
						  				</td>
						  				<td>/</td>
						  				<td>
						  					<span title="查看所有实例"
									    		@click="goPage('/sl/yy',{deployType:'2'})" 
										    		style="cursor: pointer;" 
										    		>
										    		{{dashbordData.appOverveiw.total}}
										    	</span>
						  				</td>
						  			</tr>
						  			
						  			<tr>
						  				<td>组件:</td>
						  				<td>
						  					<span title="查看运行中的实例"
									    		@click="goPage('/sl/zj',{status:'1'})" 
									    		style="cursor: pointer;" 
									    		class="green">
									    		{{dashbordData.assemblyOverview.normal}}
									    	</span>
						  				</td>
						  				<td>/</td>
						  				<td>
						  					<span title="查看已停止的实例"
									    		@click="goPage('/sl/zj',{status:'2'})" 
										    		style="cursor: pointer;" 
										    		class="grey">
										    		{{dashbordData.assemblyOverview.stop}}
										    	</span>
						  				</td>
						  				<td>/</td>
						  				<td>
						  					<span title="查看异常实例"
									    		@click="goPage('/sl/zj',{status:'4'})" 
										    		style="cursor: pointer;" 
										    		class="red">
										    		{{dashbordData.assemblyOverview.abnormal}}
										    	</span>
						  				</td>
						  				<td>/</td>
						  				<td>
						  					<span title="查看所有实例"
									    		@click="goPage('/sl/zj')" 
									    		style="cursor: pointer;" 
									    		>
									    		{{dashbordData.assemblyOverview.total}}
									    	</span>
						  				</td>
						  			</tr>
						  			
						  		</table>
						  		
						  	</p>
						  </div>
					</el-card>
				</el-col>
			</el-row>
			
			
			<el-row style="margin: 20px 10px;" :gutter="20">
				<el-col :span="6">
					<el-card shadow="never">
							<div slot="header" class="clearfix">
						    <span><i class="iconfont icon-pingfen"></i>&nbsp;系统运行分值</span>
						    <el-button style="float: right; padding: 3px 0" type="text">
						    	
						    </el-button>
						  </div>
						  <div class="text item clearfix" style="height: 276px;position: relative;">
						  	<div class="qiu">
						  		<qiu ref="qiu" :num="systemData.value"></qiu>
						  	</div>
						  	<p class="grey" style="position: absolute;right:0;bottom: 0;font-size: 12px;line-height: 2;">
						  		健康: <span class="green">90分以上</span> <br>
									良好: <span class="yellow">80-90分</span> <br>
									一般: <span class="orange">60-80分</span> <br>
									危险: <span class="red">60分以下</span> <br>
						  	</p>
						  </div>
					</el-card>
				</el-col>
				<el-col :span="18">
					<el-card shadow="never">
							<div slot="header" class="clearfix">
						    <span><i class="iconfont icon-gaojing"></i>&nbsp;告警信息</span>
						    <el-button style="float: right; padding: 3px 0" type="text">
						    	<router-link to="/jk/ls">更多</router-link>
						    </el-button>
						  </div>
						  <div class="text item clearfix" style="height: 276px;">
						  	
						  	<el-table :data="systemData.alarms.data">
						  		<el-table-column
							      prop="sourceType"
							      label="资源类型">
							      <template slot-scope="scope">
							      	{{['主机', '容器', '应用'][scope.row.sourceType]}}
							      </template>
							    </el-table-column>
							    <el-table-column
							      prop="host"
							      label="故障源">
							    </el-table-column>
							    <el-table-column
							    	align="center"
							      label="告警级别">
							      <template slot-scope="scope">
							      	<span :style="{color: ['', '#FFD700', '#FFD700', '#FFA07A', '#FF4500'][scope.row.level]}">{{['', '警告', '低危', '高危', '致命'][scope.row.level]}}</span>
							      </template>
							    </el-table-column>
							    <el-table-column
							    	align="center"
							      prop="norm"
							      label="指标">
							    </el-table-column>
							    <el-table-column
							    	align="center"
							      label="解决状态">
							      <template slot-scope="scope">
							      	<span v-html="historyStatusFilter(scope.row.status)"></span>
							      </template>
							    </el-table-column>
							    <el-table-column
							    	align="right"
							    	width="151px"
							      prop="createTime"
							      label="发生时间">
							      <template slot-scope="scope">
							      	<span v-html="parseTime(scope.row.createTime,'{y}-{m}-{d} {h}:{i}:{s}')"></span>
							      </template>
							    </el-table-column>
						  	</el-table>
						  	
						  	<el-pagination 
									v-if="!noPage"
									:disabled="!page.total"
							     class="serach-pagination"
							     background
							     layout="total, sizes, prev, pager, next, jumper"
							     :current-page="page.pageNum"
							     :page-sizes="page.pageSizes"
							     :page-size="page.pageSize"
							     :total="page.total"
							     @size-change="handleSizeChange"
							     @current-change="handleCurrentChange"
							     >
						    </el-pagination>
						  	
						  </div>
					</el-card>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col>
					<el-row style="margin:0 20px 20px;">
	        	<el-col :span="24" class="wl">
	        		<label>主机&nbsp;</label>
	        		
	        		<hostSelect
	        			ref="hostSelect"
	        			:autoSelect="true"
	        			@change="hostChange" ></hostSelect>
	        		
	        	</el-col>
	        </el-row>
	        
					<jiankong ref="jiankong"></jiankong>
					
				</el-col>
			</el-row>
			
    </el-scrollbar>
    <!--滚动内容 end -->
		
		
		<!--弹窗内容 start-->
		<div class="app-output-window">
			
			
			
		</div>
		<!--弹窗内容 end-->
		
	</div>
</template>

<script>
//	import nameInput from "@/view/components/input/nameInput";
//	import hostNameInput from "@/view/components/input/hostNameInput";
//	import hostStatusSelect from "@/view/components/select/hostStatusSelect";

	import pageTitle from "@/view/layout/components/content/pageTitle";
	import {getGlInfo} from "@/service/swagger/CommonController";
	import {getSysAlarmInfo} from "@/service/swagger/DashboardController";
	import { historyStatusFilter } from '@/filters/status/index';
	import qiu  from "./index/qiu";
	import jiankong from "./ziyuan/zhuji/jiankong";
	import hostSelect from "@/view/components/select/hostSelect";
	import {parseTime} from "@/utils/index";
	
	let $ = require("jQuery")
	
	export default {
		components : {
			pageTitle,
			qiu,
			jiankong,
			hostSelect,
		},
		data(){
			return {
				pageTitle : "概览",
				dashbordData : {
					containerOverview : {},
					appOverveiw : {},
					assemblyOverview : {},
				},
				systemData : {
					alarms : {
						data :[]
					},
					value : 100,
				},
				hasEverSystemData : false ,
				historyStatusFilter : historyStatusFilter ,
				parseTime : parseTime ,
				noPage :true,
				page: {
					total: 0,
					pageSize: 4,
					pageNum: 1,
					pageSizes: [1,2,3,4],
				},
			}
		},
		mounted(){
			this.getDashbordData();
			this.$refs.hostSelect.getData();
			
			$(".index-data .el-scrollbar__view").on("resize",()=>{
				console.log("resize")
			})
		},
		methods : {
			getDashbordData(){
				getGlInfo().then(ret=>{
					if(!ret.code){
						this.dashbordData = ret.data
					}
				})
				this.initAlarmInfo();
			},
			
			initAlarmInfo(){
				getSysAlarmInfo({
					pageNum: this.page.pageNum,
					pageSize: this.page.pageSize
				}).then(ret=>{
					if(!ret.code){
						this.systemData = {
							alarms : ret.data.alarms || {data :[]},
							value : ret.data.value||ret.data.value==0? ret.data.value : 100,
						};
						
						if(ret.data&&ret.data.length){
							this.noPage = true;
						}else{
							this.page.total = ret.data&&ret.data.alarms?ret.data.alarms.totalNum:0 ;
							this.noPage = false;
						}
						if(!this.hasEverSystemData){
							this.$refs.qiu.init(this.systemData.value);
						}
						this.hasEverSystemData = true ;
					}
				})
			},
			
			goPage(path,query){
				this.$router.push({
					path : path ||"/",
					query : {
						...query
					}
				});
			},
			
			hostChange(name, v) {
				this.$refs.jiankong.initPies(v);
				this.$refs.jiankong.initWl(v);
			},
			
			handleCurrentChange(pageNum) {
				this.page.pageNum = pageNum;
				this.initAlarmInfo();
			},
			handleSizeChange(size) {
				this.page.pageSize = size;
				this.page.pageNum = 1;
				this.initAlarmInfo();
			},
			
		}
	}
</script>

<style lang="scss">
	.index-data {
		background: #f2f4f9;
		border-radius: 5px;
		overflow: hidden;
		
		.app-page-title {
			background: #fff;
		}
		
		.qiu .box{
			top: 10px;
			left: 10px;
			transform: scale(0.55);
			transform-origin: 0 0;
		}
	}
	
	.dashbord-data {
		
		.el-col {
			margin-bottom: 20px;
		}
		p.fr {
			text-align: right;
			margin-left: 5px !important;
			
			& td {
				padding: 0 2px;
				font-size: 14px;
				line-height: 2;
				
				&:not(:nth-child(1)) {
					
				}
			}
		}
		
		.el-card__body {
			height: 82px;
		}
	}
</style>

<style scoped lang="scss">
@import "../../styles/variables.scss";
	.wl {
    div {
      display: inline-block;
    }
  }
	/*.icon-chilunshezhi:before {
			content: "\e603";
			position: absolute;
	}*/
</style>